<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:bs="http://none.cz">
<head th:include="common/layout::header"></head>
<body>
	<div th:substituteby="common/layout::menu"></div>

	<div class="container">
		<div th:include="common/layout::messages">cannot load messages</div>

		<div id="map_canvas"></div>

		<div th:include="common/layout::js"></div>
		<script type="text/javascript"
			th:src="@{https://maps.googleapis.com/maps/api/js(key='AIzaSyDzgEHxP_idQhcKveIgW7i5DYBYeo766Tk',sensor='false')}"
			src=""></script>


		<script th:inline="javascript">
			/*<![CDATA[*/

			var infowindow;

			function openInfo() {
				marker = this;
				var info = marker.get("info");
				if (infowindow)
					infowindow.close();
				infowindow = new google.maps.InfoWindow({
					content : info
				});
				infowindow.open(marker.getMap(), marker);
			}

			function initialize() {
				var mapOptions = {
					center : new google.maps.LatLng(50.083, 14.423),
					zoom : 4,
					mapTypeId : google.maps.MapTypeId.HYBRID
				};
				var map = new google.maps.Map(document
						.getElementById("map_canvas"), mapOptions);

				var myLatlng;
				var marker;
				var contentString;

				google.maps.event.addListener(map, 'click', function() {
					if (infowindow)
						infowindow.close();
				});

				var places = /*[[${places}]]*/[];

				for ( var i = 0; i < places.length; i++) {
					var p = places[i];
					// == start marker ==
					myLatlng = new google.maps.LatLng(p['axisx'], p['axisy']);
					marker = new google.maps.Marker({
						position : myLatlng,
						map : map,
						title : p['name']
					});

					contentString = '<div>' + '<h2>' + p['name'] + '</h2>'
							+ '<div id="bodyContent">' + p['description']
							+ '</div></div>';

					marker.set("info", contentString);
					google.maps.event.addListener(marker, 'click', openInfo);
					// == end marker ==
				}
			}

			$(document).ready(function() {
				initialize();
			});
			/*]]>*/
		</script>
	</div>

</body>
</html>